<template>
  <component :is="resolveLayoutVariant" :class="`skin-variant--${appSkinVariant}`">
    <router-view></router-view>
    <Snackbar></Snackbar>
    <notifications group="foo" position="top center" />

    <v-overlay :z-index="9999" :value="overlay">
      <v-progress-circular :size="50" color="#fff" indeterminate></v-progress-circular>
    </v-overlay>

    <v-snackbar
      :timeout="5000"
      v-model="snackbar.isOpen"
      absolute
      
      bottom
      color="deep-purple accent-4"
      elevation="24"
    >
    <template v-slot:action="{ attrs }">
        <v-btn
          color="blue"
          text
          v-bind="attrs"
          @click="changeSnackbar({isOpen:false,title:''})"
        >
          Close
        </v-btn>
      </template>
      {{ snackbar.title }}
    </v-snackbar>
  </component>
</template>

<script>
// eslint-disable-next-line object-curly-newline
import { computed } from "@vue/composition-api";
// eslint-disable-next-line import/no-unresolved
import useAppConfig from "@core/@app-config/useAppConfig";
import { useLayout } from "@core/layouts/composable/useLayout";
import { useRouter } from "@core/utils";

// Layouts
import LayoutBlank from "@/layouts/variants/blank/LayoutBlank.vue";
import LayoutContentHorizontalNav from "@/layouts/variants/content/horizontal-nav/LayoutContentHorizontalNav.vue";
import LayoutContentVerticalNav from "@/layouts/variants/content/vertical-nav/LayoutContentVerticalNav.vue";
import useDynamicVh from "@core/utils/useDynamicVh";

import InitialWallet from "@/components/InitialWallet.vue";

// Dynamic vh

export default {
  components: {
    LayoutContentVerticalNav,
    LayoutContentHorizontalNav,
    LayoutBlank,
    Snackbar: () => import("@/components/Snackbar.vue"),
  },
  mixins: [InitialWallet],
  data: () => ({}),
  watch: {
    "$vuetify.theme.isDark": function () {
      this.adjustBodbyBackground();
    },
  },
  mounted() {
    this.adjustBodbyBackground();
  },
  methods: {
    adjustBodbyBackground() {
      const body = document.querySelector("body");
      if (body) {
        body.style.background = this.$vuetify.theme.dark ? "#1e1e1e" : "#fff";
      }
    },
  },
  setup() {
    const { route } = useRouter();
    const { appContentLayoutNav, appSkinVariant, appRouteTransition } = useAppConfig();

    const { handleBreakpointLayoutSwitch } = useLayout();
    handleBreakpointLayoutSwitch();

    const resolveLayoutVariant = computed(() => {
      if (route.value.meta.layout === "blank") return "layout-blank";
      if (route.value.meta.layout === "content")
        return `layout-content-${appContentLayoutNav.value}-nav`;

      return null;
    });

    useDynamicVh();

    return {
      resolveLayoutVariant,
      appSkinVariant,
      appRouteTransition,
    };
  },
};
</script>
